<template>
    <div class="userBox">
        <div class="usersTitle">
            <div class="titleText">接口文档</div>
            <!-- <div class="titlesBrn">
                <el-button class="titlesBrn" type="primary" size="mini" @click="toAddUsers">新增接口项目</el-button>
            </div> -->
        </div>
        <el-table :data="project.items" style="width: 100%" header-row-class-name="elTableStyle">
            <el-table-column prop="projectName" label="项目名称"> </el-table-column>
            <el-table-column prop="projectState" label="项目状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.projectState == 'UNFINISHEDTASK'">未完成</span>
                    <span v-if="scope.row.projectState == 'FINISHEDTASK'">已完成</span>
                    <span v-if="scope.row.projectState == 'OVERDUETASKS'">逾期</span>
                    <span v-if="scope.row.projectState == 'TEMPORARYTASK'">临期</span>
                </template>
            </el-table-column>
            <el-table-column label="项目负责人">
                <template slot-scope="scope">
                    {{ getUserName(scope.row.principalId) }}
                </template>
            </el-table-column>
            <el-table-column label="负责人电话">
                <template slot-scope="scope">
                    {{ getUserPhone(scope.row.principalId) }}
                </template>
            </el-table-column>
            <el-table-column prop="permission" label="负责人权限">
                <template slot-scope="scope">
                    {{ getUserPermission(scope.row.principalId) }}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handlClick(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination :totalNum="project.totalNum" @paginaClick="paginaClickTable"></pagination>
    </div>
</template>
<script lang="ts">
export default {
    data() {
        return {
            pageData: [],
            pageNum: 1,
            project: '',
            userList: ''
        }
    },
    mounted() {
        ;(this as any).getUserList()
        ;(this as any).getObjectList()
    },
    computed: {
        getUserName() {
            return (id: string) => {
                if ((this as any).userList.length > 0) {
                    let obj = (this as any).userList.filter((item: any) => {
                        if (item.id == id) {
                            return item
                        }
                    })
                    return obj[0].name
                }
            }
        },
        getUserPhone() {
            return (id: string) => {
                if ((this as any).userList.length > 0) {
                    let obj = (this as any).userList.filter((item: any) => {
                        if (item.id == id) {
                            return item
                        }
                    })
                    return obj[0].phone
                }
            }
        },
        getUserPermission() {
            return (id: string) => {
                if ((this as any).userList.length > 0) {
                    let obj = (this as any).userList.filter((item: any) => {
                        if (item.id == id) {
                            return item
                        }
                    })
                    if (obj[0].permission == '1') {
                        return '管理员'
                    } else {
                        return '普通用户'
                    }
                }
            }
        }
    },
    methods: {
        paginaClickTable(val: string | number) {
            console.log(val)
        },
        // toAddUsers() {
        //     if ((this as any).$isAdmin()) {
        //         ;(this as any).$router.push('/apiword/addapiword')
        //     } else {
        //         ;(this as any).$alert('你无权进行此操作！请联系管理员')
        //     }
        // },
        handlClick(row: any) {
            ;(this as any).$router.push(`/apiword/apiwordlist/${row.projectId}/${row.projectName}`)
        },
        getObjectList() {
            let userId = ''
            let loginMsg = JSON.parse((sessionStorage as any).getItem('loginMsg'))
            if (loginMsg.permission != '1') {
                userId = loginMsg.id
            }
            ;(this as any).$request.get('/api/oa/users/findProject', { userId, pageNum: (this as any).pageNum, pageSize: (this as any).$setTing.paging.pageSize }).then((res: any): void => {
                if (res.code == 200) {
                    ;(this as any).project = res.data
                }
            })
        },
        // 获取用户列表
        getUserList(): void {
            ;(this as any).$request.get('/api/oa/users/list').then((res: any): void => {
                if (res.code == 200) {
                    ;(this as any).userList = res.data
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.userBox {
    background: #ffffff;
    padding: 20px;
    .usersTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 25px;
        padding-bottom: 15px;
        .titleText {
            font-weight: 600;
        }
        .titlesBrn {
            width: 100px;
        }
    }
    .userHeadImg {
        width: 100px;
        height: 100px;
        border-radius: 5px;
        cursor: pointer;
    }
}
</style>
<style>
.userBox .elTableStyle {
    color: #333333;
}
.userBox .elTableStyle th {
    background: #f5f5f5;
    text-align: center;
}
.userBox table tr td .cell {
    text-align: center !important;
}
</style>
